<template>
  <el-table-column
    :label="itemChild.cellName"
    :custom="itemChild.cellDataKey"
    :prop="itemChild.cellDataKey"
    :align="itemChild.cellAlignment || 'center'"
    :min-width="itemChild.cellWidth"
  >
    <template v-for="(item, index) in itemChild.children" :key="index">
      <more-table v-if="item?.children && item?.children?.length" :item-child="item"></more-table>
      <el-table-column
        v-else
        :label="item?.cellName"
        :custom="item?.cellDataKey"
        :prop="item?.cellDataKey"
        :align="item?.cellAlignment || 'center'"
        :min-width="item?.cellWidth || 100"
        :show-overflow-tooltip="false"
      >
        <template #default="scope">
          {{ item.isSumItem ? getSum(item.cellDataKey, scope.row) : scope.row[item?.cellDataKey] }}
        </template>
      </el-table-column>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
const props = defineProps({
  itemChild: {
    type: Object as PropType<any>,
    required: true
  }
})
const getSum = (key: string, row: any) => {
  let arr = key.split(',')
  let sumVal = 0
  arr.forEach((v) => (sumVal += Number(row[v])))
  return arr.every((v) => row[v] === '' || row[v] === null) ? '' : sumVal
}
</script>
<style scoped lang="scss"></style>
